import Taro, {FC, useEffect, useState} from '@tarojs/taro'
import {View, Text, Image} from '@tarojs/components'
import './index.scss'
import {getGlobalData} from '../../utils/global'

const Mine: FC = () => {
  const [userInfo, setUserInfo] = useState(getGlobalData('loginVO') ? getGlobalData('loginVO') : {})
  const [statusBarHeight, setStatusBarHeight] = useState(getGlobalData('statusBarHeight') || 20)
  const [navigationHeight, setNavigationHeight] = useState(
    getGlobalData('navigatetionHeight') || 44,
  )

  useEffect(() => {
    Taro.getStorage({
      key: 'loginVO',
      success: function(res) {
        setUserInfo(res.data)
      },
    })
  }, [])
  const navigatezl = () => {
    Taro.navigateTo({
      url: '/pages/MyInfo/index',
    })
  }
  const navigatelb = () => {
    Taro.navigateTo({
      url: '/pages/MyLabel/index',
    })
  }
  return (
    <View className="minePage">
      <View
        className="flex alignCenter mineTop"
        style={{
          paddingTop: `${statusBarHeight + navigationHeight}` + 'px',
        }}
        onClick={() => {
          Taro.navigateTo({
            url: `/pages/MenberHomePage/index?toUserId=${userInfo.user.userId}`,
          })
        }}>
        <View className="mineText">
          <View className="mineName">{userInfo.user.nickName || '未登录'}</View>
          <View
            className="mineSign multi-txt-overhide"
            style={{
              display: '-webkit-box',
              overflow: 'hidden',
              '-webkit-line-clamp': 1,
              '-webkit-box-orient': 'vertical',
            }}>
            {userInfo.user.userSignature}
          </View>
          <View className="uploadLife">上传生活照</View>
        </View>
        <View className="userAvater">
          <Image src={userInfo.user.userImg} className="mineImage" />
        </View>
      </View>
      <View>
        <View className="flex mineList" onClick={navigatezl}>
          <View className="mineLeft">
            {/* <Text className="iconlist iconfont"></Text> */}
            <Image className="mineIcon" src={require('../../assets/seeking/info.png')} />
            我的资料
          </View>
          <View className=" mineRight">
            完善资料，提高曝光<Text className="iconfont iconarrow-right"></Text>
          </View>
        </View>
        <View className="flex mineList" onClick={navigatelb}>
          <View className="mineLeft">
            <Image className="mineIcon" src={require('../../assets/seeking/label.png')} />
            {/* <Text className="iconlist iconfont"></Text> */}
            我的标签
          </View>
          <View className=" mineRight">
            完善资料，发现更多同类<Text className="iconfont iconarrow-right"></Text>
          </View>
        </View>
      </View>
    </View>
  )
}

Mine.config = {
  navigationBarTitleText: '我的',
  navigationBarBackgroundColor: '#F9F9F9',
  navigationStyle: 'custom',
}

export default Mine
